

<title>DNS设置 - 线路分组</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">首页</a>
    <a><cite>线路分组</cite></a>
    <a><cite>DNS设置</cite></a>
  </div>
</div>

<style type="text/css">
.layui-elem-quote{padding: 6px;}
.thin-gray{font-weight: 400;color: #999;} 
.small-title{font-weight:700;font-size:14px}
hr {margin-bottom: 30px}
</style>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body">
         <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <ul class="layui-tab-title">
            <li class="layui-this">CNAME域名</li>
            <li>DNS设置</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
            
              <script type="text/html" id="test-table-toolbar-toolbarDemo">
                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md9">
                      <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
                      <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
                    </div>
  
                    <div class="layui-col-md2">
                      <input style="height:30px" type="text" name="search" placeholder="输入域名搜索" autocomplete="off" class="layui-input">
  
                    </div>
                    <div class="layui-col-md1">
                      <button class="layui-btn  layui-btn-sm" onclick="search()">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                      </button>
                    </div>
  
                  </div>
                  
              </script>
               
              <script type="text/html" id="test-table-toolbar-barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
              </script>

            </div>
            <div class="layui-tab-item">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-lg2 layui-col-md4">DNS提供商：</div>
                <div class="layui-col-lg2 layui-col-md8 layui-form">
                  <select name="dns" lay-filter="dns" lay-verify="">
                    <option value="">请选择DNS</option>
                    <option value="aliyun">阿里云 (aliyun.com,alibabacloud.com)</option>
                    <option value="dns_la">DNSLA (dns.la)</option>
                    <option value="dnspod_cn">DNSPod (dnspod.cn)</option>
                    <option value="dnspod_com">DNSPod国际版（dnspod.com）</option>
                    <option value="dnsdotcom">帝恩思 (dns.com)</option>
                    <option value="cloudflare">Cloudflare (cloudflare.com)</option>
                    <option value="dnsdun">DNS盾 (dnsdun.com)</option>
                  </select>   
                </div>
              </div> 
              <div class="layui-row layui-col-space10">
                <div class="layui-col-md2 id">ID：</div>
                <div class="layui-col-lg2"><input type="text" name="id" autocomplete="off" class="layui-input"></div>
              </div> 
              <div class="layui-row layui-col-space10">
                <div class="layui-col-md2 token">Token/Secret：</div>
                <div class="layui-col-md2"><input type="text" name="token" autocomplete="off" class="layui-input"></div>
              </div>      

              <div class="layui-row layui-col-space10 layui-hide zone-id">
                <div class="layui-col-md2">zone id：</div>
                <div class="layui-col-md2"><input type="text" name="zone_id" autocomplete="off" class="layui-input"></div>
              </div> 

              <div class="layui-row layui-col-space10">
                <div class="layui-col-md2">TTL：</div>
                <div class="layui-col-md2"><input type="text" name="ttl"  value="600" autocomplete="off" class="layui-input"></div>
              </div> 

              <div class="layui-row layui-col-space10 dnsdun layui-hide">
                <div class="layui-col-md2">API地址：</div>
                <div class="layui-col-md2"><input type="text" name="gateway"  value="https://api.dnsdun.com" autocomplete="off" class="layui-input"></div>
              </div> 

              <div class="layui-row layui-col-space10" style="margin-top:20px;">
                <div class="layui-col-md2"></div>
                <div class="layui-col-md1"><input type="button" id="save" value="验证并保存" class="layui-btn layui-btn-sm"></div>
                <div class="layui-col-md4">
                  <div class="layui-btn-group">
                    <input type="button" id="repair" value="记录修复" class="layui-btn  layui-btn-normal layui-btn-sm">
                    <input style="margin-left: 10px !important;" type="button" id="clean" value="清除CDN无关解析" class="layui-btn  layui-btn-warm layui-btn-sm">
                  </div>
                </div>
                
              </div>

            </div>
        </div>
      </div>                 

    </div>
  </div>
</div>
</div>
</div>

<script type="text/javascript">
  layui.use(['admin', 'table','form'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,view = layui.view
    ,table = layui.table
    ,form = layui.form;

    form.render()
    // 监听切换
    form.on('select(dns)', function(data){
      if (data.value == "cloudflare") {
        $(".id").text("Email：")
        $(".token").text("API Key：")
        $(".zone-id").addClass("layui-hide")

      } else {
        $(".id").text("ID：")
        $(".token").text("Token/Secret：")
        $(".zone-id").addClass("layui-hide")
      }

      if (data.value == "dnsdun") {
        $(".dnsdun").removeClass("layui-hide")
      } else {
        $(".dnsdun").addClass("layui-hide")
      }

    });  

    // 获取配置
    admin.req({
      url: '/configs/global-0-system-dns_config' //实际使用请改成服务端真实接口
      ,type: "get"
      ,contentType:"application/json"
      ,dataType: "json"        
      ,done: function(res){
        var data = JSON.parse(res.data.value)
        if (typeof(data.dns) != "undefined") {
          // dns
          $("select[name='dns']").val(data.dns)

          // id
          $("input[name='id']").val(data.id)

          // token
          $("input[name='token']").val(data.token)

          // zone_id
          $("input[name='zone_id']").val(data.zone_id)

          // ttl
          $("input[name='ttl']").val(data.ttl)

          if (data.dns == "huaweicloud") {
            $(".id").text("IAM用户名：")
            $(".token").text("IAM密码：")
            $(".zone-id").removeClass("layui-hide")
          } else {
            $(".id").text("ID：")
            $(".token").text("Token/Secret：")
            $(".zone-id").addClass("layui-hide")
          }

          form.render()

        }
      }
    });

    $("#save").click(function (argument) {
      var id = $("input[name='id']").val()
      var token = $("input[name='token']").val()
      var dns = $("select[name='dns']").val()
      var ttl = $("input[name='ttl']").val()
      var zone_id = $("input[name='zone_id']").val()
      var gateway = $("input[name='gateway']").val()
      var rnd = Math.ceil(Math.random()*100);
      var data = JSON.stringify({"id":id.trim(), "token":token.trim(),"gateway":gateway, "dns":dns,"ttl":ttl.trim(),"rnd":rnd,"zone_id":zone_id})

      admin.req({
        url: '/configs/global-0-system-dns_config' //实际使用请改成服务端真实接口
        ,type: "put"
        ,data: JSON.stringify({"value": data})
        ,contentType:"application/json"
        ,dataType: "json"
        ,done: function(res){
          //登入成功的提示与跳转
          layer.msg('保存成功', {
            offset: '15px'
            ,icon: 1
            ,time: 1000
          });
        }
      });
    })

    $("#repair").click(function (argument) {
      admin.req({
        url: '/configs/global-0-system-record_repair' //实际使用请改成服务端真实接口
        ,type: "put"
        ,data: JSON.stringify({"value":"1"})
        ,contentType:"application/json"
        ,dataType: "json"        
        ,done: function(res){
          //登入成功的提示与跳转
          layer.msg('已发送修复请求，结果请到后台任务里查看', {
            offset: '15px'
            ,icon: 1
            ,time: 3000
          });
        }
      });
    })

    $("#clean").click(function (argument) {
      admin.req({
        url: '/configs/global-0-system-record_repair' //实际使用请改成服务端真实接口
        ,type: "put"
        ,data: JSON.stringify({"value":"2"})
        ,contentType:"application/json"
        ,dataType: "json"        
        ,done: function(res){
          //登入成功的提示与跳转
          layer.msg('已发送修复请求，结果请到后台任务里查看', {
            offset: '15px'
            ,icon: 1
            ,time: 3000
          });
        }
      });
    })

    var access_token = layui.data('layuiAdmin')['access-token']
    table.render({
      elem: '#test-table-toolbar'
      ,url: "/cname-domains"
      ,headers: {"access-token":access_token}
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,title: 'cname域名列表'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'id', title:'ID'}
        ,{field:'domain', title:'域名'}
        ,{field:'des', title:'备注'}      
        ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:120}
      ]]
      ,page: true
    });

    //头工具栏事件
    table.on('toolbar(test-table-toolbar)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          admin.popup({
            title: '新增cname域名'
            ,area: ['400px', '300px']
            ,id: 'LAY-popup-dns-domain-add'
            ,success: function(layero, index){
              view(this.id).render('node/dns/domain').done(function(){
                form.render(null, 'layuiadmin-form-nodeadmin');
                
                //监听提交
                form.on('submit(LAY-dns-domain-front-submit)', function(data){
                  var field = data.field; //获取提交的字段
                  var domain = field.domain
                  var des = field.des

                  admin.req({
                    url: '/cname-domains' //实际使用请改成服务端真实接口
                    ,data: JSON.stringify({"domain":domain, "des":des})
                    ,type: "post"
                    ,contentType:"application/json"
                    ,dataType: "json"
                    ,done: function(res){
                      //登入成功的提示与跳转
                      layer.msg('新增成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                      }, function(){
                        layui.table.reload('test-table-toolbar'); //重载表格
                        layer.close(index); //执行关闭 
                      });
                    }
                  });

                });
              });
            }
          });
        break;
        case 'delete':
          var data = checkStatus.data;
          if (data.length == 0) {
            layer.alert('请选择需要删除的域名');   
            return
          }
          req_data = []
          for (i in data) {
            req_data.push(data[i]['id'])
          }

          var ids = req_data.join(",")
          layer.confirm('将删除('+ids+')域名，是否继续', function(index){
            admin.req({
              url: '/cname-domains/'+ids //实际使用请改成服务端真实接口
              ,type: "delete"
              ,done: function(res){
                //登入成功的提示与跳转
                layer.msg('删除成功', {
                  offset: '15px'
                  ,icon: 1
                  ,time: 1000
                }, function(){
                  layui.table.reload('test-table-toolbar'); //重载表格
                });
              }
            });
          });
        break;        
      };
    });
    
    //监听行工具事件
    table.on('tool(test-table-toolbar)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('是否确定删除域名', function(index){
          var id = data.id
          admin.req({
            url: '/cname-domains/' + id //实际使用请改成服务端真实接口
            ,type: "delete"
            ,done: function(res){
              //登入成功的提示与跳转
              layer.msg('删除成功', {
                offset: '15px'
                ,icon: 1
                ,time: 1000
              }, function(){
                layui.table.reload('test-table-toolbar'); //重载表格
                layer.close(index); //执行关闭 
              });
            }
          });

        });
      } else if(obj.event === 'edit'){
        admin.popup({
          title: '编辑域名'
          ,area: ['400px', '300px']
          ,id: 'LAY-popup-dns-domain-edit'
          ,success: function(layero, index){
            view(this.id).render('node/dns/domain',data).done(function(){
              //监听提交
              form.on('submit(LAY-dns-domain-front-submit)', function(data){
                var field = data.field; //获取提交的字段
                var domain = field.domain
                var des = field.des
                var id = field.id
                admin.req({
                  url: '/cname-domains/' + id //实际使用请改成服务端真实接口
                  ,data: JSON.stringify({"domain": domain,"des":des})
                  ,type: "put"
                  ,done: function(res){
                    //登入成功的提示与跳转
                    layer.msg('保存成功', {
                      offset: '15px'
                      ,icon: 1
                      ,time: 1000
                    }, function(){
                      layui.table.reload('test-table-toolbar'); //重载表格
                      layer.close(index); //执行关闭 
                    });
                  }
                });

              });
            });
          }
        });
      }
    });  

  });       
  

  function search (argument) {
      var search = layui.$("input[name='search']").val()

      layui.table.reload('test-table-toolbar', {
        where: {search: search.replace(/\.n$/,"")},
        done: function (argument) {
          layui.$("input[name='search']").val(search)
        }, page: {curr: 1}
      });
  } 

</script>